<template>
	<view>
		<explorer-card v-for="(card, index) in cards" :key="index" :title="card.title" :author="card.author"
			:body="card.body" :likes="card.likes" :thoughts="card.thoughts" :mark="card.mark"
			@swipe="handleCardSwipe(index, $event)" />
	</view>
</template>

<script setup>
import explorerCard from '../../components/explorer_card/explorer_card.vue';
import { getExploreList } from "@/api/index.js";
import { ref, reactive, onMounted } from 'vue';
const cards = reactive({
	lessons: [],
	comments: [],
})


onMounted(async () => {
	const res = await getExploreList()
	console.log("list", res)
	cards.lessons = res.lessons
	cards.comments = res.comments

})



const handleCardSwipe = (index, direction) => {
	const card = cards.value[index];
	if (direction === 'right') {
		card.mark = '喜欢';
		// 执行喜欢的操作，比如添加到喜欢列表
	} else if (direction === 'left') {
		card.mark = '已阅';
		// 执行已阅的操作，比如添加到已阅列表
	}

}






</script>
<style scoped></style>